<template>
    
    <!-- 组件的模板 -->
    <div class="page form-report">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">标题</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入标题" v-model="item.info.title">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">提示语</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入提示语 (选填)" v-model="item.info.tip">
                </div>
            </div>
        </div>
        <div class="weui-cells__title">选项</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell" v-for="opt in item.info.options" track-by="$index">                
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入选项" v-model="opt">
                </div>
                <span class="bg_sprite btn_delete" v-on:click="delselect($index)"></span>
            </div>
        </div>        
        <a class="add-item touch" href="javascript:;" v-on:click="addselect"><span class="icon bg_sprite"></span><span>添加选项</span></a>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_switch">
                <div class="weui-cell__bd">是否必填</div>
                <div class="weui-cell__ft">
                    <input class="weui-switch" type="checkbox" v-model="item.info.required">
                </div>
            </div>            
        </div>
    </div>







    <!-- <div class="weui-cells weui-cells_form mr-top-0">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">标题</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入标题" v-model="item.info.title"/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">提示语</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入提示语" v-model="item.info.tip"/>
            </div>
        </div>
    </div>
    <div class="bgc"><div class="weui-cells__title black">选项</div></div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell" v-for="opt in item.info.options">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入选项" v-model="opt"/>
            </div>
            <div class="weui-cell__ft">
                <i class="weui-icon-cancel" v-on:click="delselect($index)"></i>
            </div>
        </div>
    </div>
    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" v-on:click="addselect">添加选项</a>

    <div class="weui-cells weui-cells_form mr-top-0">
        <div class="weui-cell weui-cell_switch">
            <div class="weui-cell__bd">是否必填</div>
            <div class="weui-cell__ft">
                <input class="weui-switch" type="checkbox" v-model="item.info.required"/>
            </div>
        </div>
    </div> -->


    <!-- <div class="bgc"><div class="weui-cells__title">预览</div></div>

    <formselect
            :title="item.info.title"
            :tip="item.info.tip"
            val=""
            :opts="item.info.options"
    ></formselect> -->
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import cache from 'gapi/cache.js'
    import widget from 'gapi/widget.js'
    import * as util from 'js/util.js'
    import commonPage from 'clientApi/commonPage.js'

    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    // import Formselect from 'components/Formselect/Formselect'

    /**
     *  组件实例对象
     */
    export default {
        components: {
            // Formselect
        },
        computed: {
            // opts: function(){
            //     let arr = [];
            //     this.options.forEach((obj) => {
            //         arr.push(obj.opt)
            //     })
            //     return arr;
            // },
            // options: function(){
            //     let result = []
            //     this.item.info.options.forEach((obj) => {
            //         result.push({opt: obj})
            //     })
            // }
        },
        data: function(){
            return{
                // options: [
                //     {
                //         opt: ''
                //     }
                // ],
                item: {
                    "id": '',
                    "type": "Select",
                    "name": "下拉选项",
                    "info": {
                        "title": "",
                        "value": "",
                        "tip": "",
                        "required": 1,
                        "options": ['','']
                    }
                }
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                //判断页面来源 type = kqandsign : 签到、考勤 自定义字段
                let origin_page = util.getUrddataString('type')
                // console.log(this.item.info.options)
                //判断是否传有 数据 参数  如果是修改字段  把源数据覆盖
                let matindex = util.getUrddataString('matindex')
                let designInfo = null
                if(origin_page === 'kqandsign'){
                    // widget.toast('kqandsign')
                    if(matindex !== null){
                        cache.getCache('designInfo', (data) => {
                            this.item = data
                            this.item.info.required = this.item.info.required == 1 ? 1 : 0
                        })
                    }
                    
                }else{
                    // widget.toast('form')
                    designInfo = util.getUrddataString('designInfo')

                    if(designInfo !== null){
                        let tempItem = JSON.parse(designInfo)
                        this.item = tempItem
                        this.item.info.required = this.item.info.required == 1 ? 1 : 0   
                    }
                }

                commonPage.updateTitleBar({
                    // backAction: 'checkChange',    // 点击返回按钮的动作（即回调函数名称）
                    // leftDisplay: false,            // 是否显示左按钮
                    // leftText: '',                // 左按钮文案
                    //leftAction: 'checkChange',    // 点击左按钮的动作（即回调函数名称）
                    rightDisplay: true,            // 是否显示右按钮
                    rightText: '提交',            // 右按钮文案
                    rightAction: 'saveResume'    // 点击右按钮的文案（即回调函数名称）
                })
                //点击右上角 确定 按钮
                window.saveResume = () => {
                    this.item.info.required = this.item.info.required == 1 ? 1 : 0
                    if(!this.item.info.title){
                        widget.toast('请输入标题')
                    }else{
                        let valid = this.item.info.options.some((obj) => {
                            return obj == ''
                        })
                        if(valid){
                            widget.toast('选项不能为空!')
                            return
                        }
                        if(this.item.info.options.length < 2){
                            widget.toast('请至少输入两个选项!')
                            return
                        }
                        //判断是否有重复选项
                        let set = new Set(this.item.info.options)
                        // alert(set.size)
                        // alert(this.item.info.options.length)
                        if(set.size != this.item.info.options.length){
                            widget.toast('请勿输入相同选项!')
                            return
                        }
                        // return
                        if(origin_page === 'kqandsign'){//kqandsign
                            if(matindex !== null){//修改
                                commonPage.goBack(1, {designInfo: this.item, matindex: matindex})
                            }else{//新建
                                commonPage.goBack(1, {designInfo: this.item, matindex: -1})
                            }
                        }else{//form
                            //如果是修改
                            if(designInfo !== null){
                                //先获取缓存
                                cache.getCache('formInfo', (data) => {
                                    //修改对应字段缓存信息 重新缓存
                                    data.format_info.splice(matindex, 1, this.item)
                                    cache.setCache('formInfo', data, 10000)
                                    commonPage.goBack(1)
                                })
                            }else{
                                //新建字段
                                cache.getCache('formInfo', (data) => {
                                    //判断有没有缓存  没有的话把默认数据格式缓存上
                                    let tempObj = {
                                        title: '',
                                        desc: '',
                                        format_info: []
                                    }
                                    if(data !== null){
                                        // alert(1)
                                        tempObj = data
                                    }
                                    //添加新字段到缓存中
                                    tempObj.format_info.push(this.item)
                                    cache.setCache('formInfo', tempObj, 10000)
                                    commonPage.goBack(1)
                                })
                            }
                        }
                    }
                }
                
            },
            addselect (){
                if(this.item.info.options[this.item.info.options.length-1] !== ''){
                    this.item.info.options.push('')
                }else{
                    widget.toast('请输入选项内容')
                }
            },
            delselect (index){
                this.item.info.options.splice(index,1)
            }
        },
        created(){

            this.init();
            $('body').on('click',function(){
                if(util.OS()=='android'){
                    window.scroll(0,0);
                }
            });
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/form-report.css"></style>
<style type="text/css">
    /*html body{
        background-color: #fff;
    }
    div.bgc{
        background-color: #f2f2f2;
        padding: 0.1px;
    }
    div.bgc div{
        margin-top: .3em;
        font-size: 16px;
    }
    div.mr-top-0{
        margin-top: 0px;
    }
    div.black{
        color: black;
        font-size: 17px;
    }
    a.weui-btn{
        margin-top: 10px;
        margin-left: 15px;
        background-color: #f2f2f2;
    }*/
</style>



